<template>
  <a-space style="width: 100%" direction="vertical">
    <a-card>
      <!-- 表单部分 -->
      <PickForm
        v-model:page="data.page"
        v-model:pageSize="data.pageSize"
        @init="getData"
        @finish="getData"
        @reset="getData"
      />
    </a-card>
    <!-- 按钮组 -->
    <a-card class="radio-card">
      <a-radio-group v-model:value="data.status" button-style="solid" size="large">
        <a-radio-button :value="undefined"> 全部 </a-radio-button>
        <a-radio-button :value="1">新任务</a-radio-button>
        <a-radio-button :value="2">已完成</a-radio-button>
        <a-radio-button :value="3">已取消</a-radio-button>
      </a-radio-group>
    </a-card>
    <a-card>
      <!-- 新增按钮 -->
      <a-button type="primary" style="margin-bottom: 20px"> 人工分配 </a-button>
      <!-- 表格部分 -->
      <PickTable
        :dataSource="dataSource"
        :loading="isLoading"
        :total="total"
        :status="data.status"
        v-model:page="data.page"
        v-model:pageSize="data.pageSize"
        @change="getData"
      >
      </PickTable>
    </a-card>
  </a-space>
</template>

<script setup>
import { getPickListAPI } from '@/services/pick'
import { reactive, ref, onMounted, watch } from 'vue'
import PickForm from './components/PickForm.vue'
import PickTable from './components/PickTable.vue'

defineOptions({
  name: 'CarCheckPage',
})

const isLoading = ref(false)
const dataSource = ref([])
const total = ref(0)
const data = reactive({
  page: 1,
  pageSize: 10,
  taskType: 1,
  // status: undefined,
})

// 获取数据
const getData = async () => {
  // 合并参数
  Object.assign(data)
  // 表格加载状态
  isLoading.value = true
  // 传递参数
  const res = await getPickListAPI(data)
  console.log(res)
  // 关闭表格加载状态
  isLoading.value = false
  // 保存列表数据，用于表格展示
  dataSource.value = res.data.items
  // 保存分页总数
  total.value = Number(res.data.counts)
}

// 获取统计车辆 - 按钮组
const truckCount = ref({})
const getTruckCountData = async () => {
  const res = await getPickListAPI(data)
  truckCount.value = res.data
}

onMounted(() => {
  // 获取统计车辆 - 按钮组
  getTruckCountData()
})

// 监听按钮组状态，切换状态后，重新获取数据
watch(
  () => data.status,
  () => {
    // 重置页码
    data.page = 1
    // 重置页码后，重新获取数据
    getData()
  },
)

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.radio-card {
  // 重置卡片样式
  :deep(.ant-card-body) {
    padding: 0;
  }
  // 重置按钮组样式
  :deep(.ant-radio-button-wrapper) {
    width: 120px;
    font-size: 14px;
    text-align: center;
    border-radius: 0;
    border: 0;
    // 隐藏中间分割线
    &::before {
      display: none;
    }
  }
}
</style>
